<template>
    <view>
        <ai-notes v-if="PageCur=='ai-notes'" :key="componentKeys.aiNotes"></ai-notes>
        <knowledge v-if="PageCur=='knowledge'" :key="componentKeys.knowledge"></knowledge>
        <mindmap v-if="PageCur=='mindmap'" :key="componentKeys.mindmap"></mindmap>
        <people v-if="PageCur=='people'" :key="componentKeys.people"></people>

        <view class="cu-bar tabbar bg-white shadow foot">
            <view :class="PageCur=='ai-notes'?'action text-green':'action text-gray'" @click="NavChange" data-cur="ai-notes">
                <view class='cuIcon-homefill'></view>AI笔记
            </view>
            <view :class="PageCur=='knowledge'?'action text-green':'action text-gray'" @click="NavChange" data-cur="knowledge">
                <view class='cuIcon-peoplelist'></view>我的知识库
            </view>
            <view :class="PageCur=='mindmap'?'action text-green':'action text-gray'" @click="NavChange" data-cur="mindmap">
                <view class='cuIcon-profile'></view>思维导图
            </view>
            <view :class="PageCur=='people'?'action text-blue':'action text-gray'" @click="NavChange" data-cur="people">
                <view class='cuIcon-people'></view>个人
            </view>
        </view>
    </view>
</template>

<script>
import AInotes from '../ai-notes/ai-notes.vue';
import Knowledge from '../knowledge/knowledge.vue';
import Mindmap from '../mindmap/mindmap.vue';
import People from '../user/people.vue';

export default {
    name: 'Index',
    components: {
        'ai-notes': AInotes,
        Knowledge,
        Mindmap,
        People
    },
    data() {
        return {
            PageCur: 'ai-notes',
            componentKeys: {
                aiNotes: 0,
                knowledge: 0,
                mindmap: 0,
                people: 0
            }
        };
    },
    onLoad() {
        // Initialize with AI Notes page
        this.PageCur = 'ai-notes';
    },
    methods: {
        NavChange(e) {
            const cur = e.currentTarget.dataset.cur;
            console.log('NavChange triggered:', cur);
            
            // Only update if navigating to a different page
            if (this.PageCur !== cur) {
                this.PageCur = cur;
                
                // Update the corresponding component key
                switch(cur) {
                    case 'ai-notes':
                        this.componentKeys.aiNotes++;
                        break;
                    case 'knowledge':
                        this.componentKeys.knowledge++;
                        break;
                    case 'mindmap':
                        this.componentKeys.mindmap++;
                        break;
                    case 'people':
                        this.componentKeys.people++;
                        break;
                }
            }
        }
    }
}
</script>

<style>
.cu-bar.tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
</style>